<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/12/17
  Time: 17:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" ;charset="utf-8">
    <title>CoolMeeting�������ϵͳ</title>
    <link rel="stylesheet" href="styles/common.css" />
    <script type="text/javascript" src="./My97DatePicker/WdatePicker.js"></script>
    <style type="text/css">
        #divfrom {
            float: left;
            width: 150px;
        }

        #divto {
            float: left;
            width: 150px;
        }

        #divoperator {
            float: left;
            width: 50px;
            padding: 60px 5px;
        }

        #divoperator input[type="button"] {
            margin: 10px 0;
        }

        #selDepartments {
            display: block;
            width: 100%;
        }

        #selEmployees {
            display: block;
            width: 100%;
            height: 200px;
        }

        #selSelectedEmployees {
            display: block;
            width: 100%;
            height: 225px;
        }
    </style>
    <script >
        $(function (){
            $('input[name=h_number]').blur(function (){
                $.ajax({
                    type:'post',
                    url:$('#path').val()+"/Chf_sMeRoomServlet",
                    data:{'capacity':$('input[name=h_number]').val()},
                    dateType:'json',
                    success:function (data){
                        var  node1=$('select[name=roomid]');

                        node1.empty();
                        $.each(data,function (i,room){
                            var node2='<option value="'+room.roomid+'">'+room.roomname+'</option>';
                            node1.append(node2);
                        })

                    },
                    error:function (xmlHttpRequest){
                        alert(xmlHttpRequest);
                    }
                })
            })
        })



        function employee(employeeid, employeename){
            this.employeeid = employeeid;
            this.employeename = employeename;
        }
        function department(departmentid, departmentname, employees){
            this.departmentid = departmentid;
            this.departmentname = departmentname;
            this.employees = employees;
        }
        var data =new Array();
            $(function (){

                $.ajax({
                    type:'get',
                    url:$('#path').val()+"/Chf_DEIdServlet",
                    dateType:'json',
                    success:function (data1){
                        var node_select=$('#selDepartments');
                        var  a=new  Array();
                        $.each(data1,function (i,DEId){
                            if(a.indexOf(DEId.departmentId)>-1){
                                console.log(a);
                            }else {
                                a.splice(0,0,DEId.departmentId);
                                var node_option='<option value="'+DEId.departmentId+'">'+DEId.departmentName+'</option>';
                                node_select.append(node_option);
                            }


                        })

                       },
                    error:function (xmlHttpRequest){
                        alert(xmlHttpRequest);
                    }
                })

        })
        var data =new Array();
        $(function (){
            $("#selDepartments").click(function (){
              $.ajax({
                type:'get',
                url:$('#path').val()+"/Chf_DEId2Servlet",
                data:{'departmentId':$('#selDepartments').val()},
                dateType:'json',
                success:function (data1){
                    var node_select=$('#selEmployees');
                    $.each(data1,function (i,DEId){
                        var node_option='<option value="'+DEId.employeeId+'">'+DEId.employeeName+'</option>';
                        node_select.append(node_option);

                    })

                },
                error:function (xmlHttpRequest){
                    alert(xmlHttpRequest);
                }
            })
            })
        })

        var selDepartments;
        var selEmployees;
        var selSelectedEmployees;

        function body_load(){
            selDepartments = document.getElementById("selDepartments");
            selEmployees = document.getElementById("selEmployees");
            selSelectedEmployees = document.getElementById("selSelectedEmployees");

            for(var i=0;i<data.length;i++){
                var dep = document.createElement("option");
                dep.value = data[i].departmentid;
                dep.text = data[i].departmentname;
                selDepartments.appendChild(dep);
            }

            fillEmployees();
        }

        function fillEmployees(){
            clearList(selEmployees);
            var departmentid = selDepartments.options[selDepartments.selectedIndex].value;
            var employees;
            for(var i=0;i<data.length;i++){
                if (departmentid == data[i].departmentid){
                    employees = data[i].employees;
                    break;
                }
            }
            for(i=0;i<employees.length;i++){
                var emp = document.createElement("option");
                emp.value = employees[i].employeeid;
                emp.text = employees[i].employeename;
                selEmployees.appendChild(emp);
            }
        }

        function clearList(list){
            while(list.childElementCount > 0){
                list.removeChild(list.lastChild);
            }
        }

        function selectEmployees(){
            for(var i=0;i<selEmployees.options.length;i++){
                if (selEmployees.options[i].selected){
                    addEmployee(selEmployees.options[i]);
                    selEmployees.options[i].selected = false;
                }
            }
        }

        function deSelectEmployees(){
            var elementsToRemoved = new Array();
            var options = selSelectedEmployees.options;
            for(var i=0;i<options.length;i++){
                if (options[i].selected){
                    elementsToRemoved.push(options[i]);
                }
            }
            for(i=0;i<elementsToRemoved.length;i++){
                selSelectedEmployees.removeChild(elementsToRemoved[i]);
            }
        }

        function addEmployee(optEmployee){
            var options = selSelectedEmployees.options;
            var i = 0;
            var insertIndex = -1;
            while(i < options.length){
                if (optEmployee.value == options[i].value){
                    return;
                } else if (optEmployee.value < options[i].value) {
                    insertIndex = i;
                    break;
                }
                i++;
            }
            var opt = document.createElement("option");
            opt.value = optEmployee.value;
            opt.text = optEmployee.text;
            opt.selected=true;

            if (insertIndex == -1){
                selSelectedEmployees.appendChild(opt);
            } else {
                selSelectedEmployees.insertBefore(opt, options[insertIndex]);
            }
        }
        $(function (){
            $('input[name=meeting_name]').blur(function (){
                $.ajax({
                    type:'get',
                    url:$('#path').val()+"/Chf_judgeMeetingNameServlet",
                    data:{'meeting_name':$('input[name=meeting_name]').val()},
                    dateType:'json',

                    error:function (xmlHttpRequest){
                        alert(xmlHttpRequest);
                    }
                })
            })
        })



    </script>
</head>
<body onload="body_load()">

<div class="page-content">
    <div class="content-nav">会议预定 > 预定会议</div>
    <input type="hidden" id="path" value="${pageContext.request.contextPath}" />
    <form action="${pageContext.request.contextPath }/Chf_addMeetingServlet" method="get">
        <fieldset>
            <legend>会议信息</legend>
            <table class="formtable">
                <tr>
                    <td>会议名称：</td>
                    <td><input type="text" id="meetingname" maxlength="20" name="meeting_name"/></td>
                </tr>
                <tr>
                    <td>预计参加人数：</td>
                    <td><input type="text" id="numofattendents" name="h_number"/></td>
                </tr>
                <tr>
                    <td>预计开始时间：</td>
                    <td><input class="Wdate" type="datetime-local" id="startTime"
                               name="startTime"
                               ></td>
                </tr>
                <tr>
                    <td>预计结束时间：</td>
                    <td><input class="Wdate" type="datetime-local" id="endTime"
                               name="endTime"
                               ></td>
                </tr>
                <tr>
                    <td>选择会议室：</td>

                    <td><select id="roomId" name="roomid"
                                >
                        <option>请选择会议室</option>
                    </select></td>
                </tr>
                <tr>
                    <td>会议说明：</td>
                    <td><textarea id="description" rows="5" name="description"></textarea>

                    </td>
                </tr>
                <tr>
                    <td>选择参会人员</td>
                    <td>
                        <div id="divfrom">
                            <select id="selDepartments" onchange="fillEmployees()" name="selDepartments">
                            </select> <select id="selEmployees" multiple="true" name="selEmployees">
                        </select>
                        </div>
                        <div id="divoperator">
                            <input type="button" class="clickbutton" value="&gt;"
                                   onclick="selectEmployees()" /> <input type="button"
                                                                         class="clickbutton" value="&lt;" onclick="deSelectEmployees()" />
                        </div>
                        <div id="divto">
                            <select id="selSelectedEmployees" multiple="multiple" name="add_Employees">
                        </select>

                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="command" colspan="2">
                        <input type="submit"class="clickbutton" value="预定会议" />
                        <input type="reset"class="clickbutton" value="重置" /></td>
                </tr>
            </table>
        </fieldset>
    </form>
</div>


</body>
</html>
